<!DOCTYPE html>
<html lang="en">
<head>
	<title>Nokia Mobile Web Components</title>
	<meta charset="utf-8" >
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="author" content="">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="shortcut icon" href="resources/images/favicon.ico" />
	<link rel="stylesheet" href="resources/styles/nokia.mwc-1.0.css" media="screen, handheld" />
	<script src="resources/scripts/nokia.mwc-1.0.js"></script>
	<script>
		function init() {
			var main_menu = SlidingDrawer({"id":"top"});
			var btn = new Button({"id":"btn", "callback":"hello"});
			
			var a = document.getElementsByTagName("*") || document.all;
			for ( var i = 0; i < a.length; i++ ) {
				if ( hasClass( a[i], "sparkline" ) )
					Sparkline( a[i] );
			}
			var temperature = Sparkline({"id":"temp"});
			
		}
		function hello(button) {
			alert("hello "  + button);	
		}
		addEvent(window, "load",init);
	</script>
</head>
<body>
	<header id="top" class="sliding-drawer">
		<img src="resources/images/component.png" alt="component" />
		<h1>Mobile Web Components</h1>
		<p>On <a href="https://projects.developer.nokia.com/mobile_web_components">projects.developer.nokia.com</a></p>
		<nav>
			<ul>
				<li><a href="index.html">Overview</a></li>
				<li><a href="collapsible.html">Collapsible</a></li>
				<li><a href="scrollable.html">Scrollable</a></li>
				<li><a href="pop-up-menu.html">Pop-up Menu</a></li>
				<li><a href="sliding-drawer.html">Sliding Drawer</a></li>
				<li><a href="slideshow.html">Slideshow</a></li>
				<li><a href="miscellaneous.html">Miscellaneous</a></li>
			</ul>
		</nav>
	</header>
	<header>
		<h2>Miscellaneous</h2>
		<p>Mini-styles that can be used throughout an application.</p>
	</header>
	<figure>
	  		<img src="resources/images/headers/flickr-wwworks-3894173886.jpg" />
	  		<figcaption>Original photo licensed under <a href="http://creativecommons.org/licenses/by/2.0/deed.en" rel="license" title="Creative Commons: Attribution 2.0 Generic (CC BY 2.0)">Creative Commons</a> by <a href="http://www.flickr.com/photos/wwworks/3894173886" title="Community bulletin board">Woodleywonderworks</a>.</figcaption>
	</figure>
	<p>This section includes miscellaneous bits and piece such as attractive headers and fonts, simple buttons and a way to turn a sequence of numbers into something a little more visual.</p>
	<h3>Buttons</h3>
	<p>A main staple of just about any web site or app, and with a little CSS (see the attached style sheet) they can literally be as simple as the following.</p>
	<p><a id="btn" class="button">A Lovely Button</a></p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<pre>
<h4>HTML</h4>
&lt;a id=&quot;btn&quot; class=&quot;button&quot;&gt;A Lovely Button&lt;/a&gt;

&lt;script&gt;
var options = {"id":"btn", "callback":"hello"};
var btn = Button(options);

function hello(button) {
	alert(&quot;hello &quot; + button);
}
&lt;/script&gt;</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
	<p>Of course you can expand on this as much as required for your project, but on mobile it's often a good idea to start with &quot;the simplest possible thing that can work&quot;. If you need more functionality you can always add it later.</p>
	<h3>Sparklines</h3>
	<p>You may occasionally find you have to communicate a series of numbers on a mobile device. These could include stock values, precipitation or temperature levels, or even bandwidth usage over a given period. While it's entirely possible to display a collection of numbers - it might be a nice to present the information in a more visually meaningful manner. One way to accomplish this is through the use of <a href="http://en.wikipedia.org/wiki/Sparkline">sparklines</a>.</p>
	<p>This mini-component is created using the new <a href="http://diveintohtml5.org/canvas.html">HTML5 Canvas element</a>.</p>
	<p>Temperature for next 7 days: <span id="temp">5,10,8,2,20,2,1,6,40,2,1,7,9,19</span></p>
	<p>Stock market in 2008: <span class="sparkline">1,6,4,3,25,8,12,1,-1,55,22</span></p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
	<code>
<pre>
<h4>HTML</h4>
// using a single #id
&lt;span id=&quot;temp&quot;&gt;1,6,4,3,25,8,12,1,-1,55,22&lt;/span&gt;

// using a class (if multiple sparklines are required)
&lt;span class=&quot;sparkline&quot;&gt;5,10,8,2,20,2,1,6,40,2,1,7,9,19&lt;/span&gt;

&lt;script&gt;
// using a single id
var temperature = Sparkline({&quot;id&quot;:&quot;temp&quot;});

// using any number of elements with &quot;sparkline&quot; class applied
var a = document.getElementsByTagName(&quot;*&quot;) || document.all;<br>for ( var i = 0; i &lt; a.length; i++ ) {<br>  if ( hasClass( a[i], &quot;sparkline&quot; ) ) {<br>    Sparkline( a[i] );<br>  }
}

&lt;/script&gt;</pre>
	</code>
	<nav><a href="#top" class="top">back to top</a></nav>
	<footer>
		<nav>
			<ul>
				<li><a href="https://projects.developer.nokia.com/home/">Nokia Projects</a></li>
				<li><a href="http://developer.nokia.com/home/">Developer.nokia.com</a></li>
			</ul>
		</nav>
		<p>Components licensed Creative Commons <a href="http://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a></p>
	</footer>
</body>
</html>

